<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <p>商品:<input type="text" v-model="msg1"></p>
        <p>数量:<input type="text" v-model="msg2"></p>
        <p>价格:<input type="text" v-model="msg3"></p>
        <button v-on:click="add">添加到购物车</button>
        <ul><li v-for="item in num">{{item.s}}的数量是{{item.n}},单计是{{item.price}},小计:{{item.xiaoji}}</li></ul>
        <span v-model="total">总计:{{totalPrice}}</span>
    
    </div>

<script>
    var v = new Vue({
        el:"#root",
        data:{
            msg1:"",
            msg2:"",
            msg3:"",
            num:[],
            xiao:"",
        },
        methods:{
            add(){
                this.xiao = this.msg2 * this.msg3;
                this.num.push({s:this.msg1,n:this.msg2,price:this.msg3,xiaoji:this.xiao});
        
                this.msg1="";
                this.msg2="";
                this.msg3="";
            }            
        },

        computed:{
            totalPrice(){
                var totalPrice = 0;
                var totalNum = 0;
                for (const key in this.num) {
                    totalPrice += this.num[key].price * this.num[key].n;
                    totalNum = totalNum + this.num[key].n*1;
                }
                return "总数---" + totalNum +  "总价---" + totalPrice + "元"
            },

        
        }



    })
</script>


</body>
</html>